<template>
  <div class="lab-container">
    <!-- 导航栏（保持原有顶部导航） -->
    <nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
      <!-- 原有导航栏代码保持不变 -->
    </nav>

    <!-- 内容区域 -->
    <main class="container my-5">
      <div class="row">
        <!-- 左侧标签页 -->
        <div class="col-md-2">
          <div class="border p-3">
            <h5 class="mb-3">合作交流</h5>
            <div class="nav flex-column nav-pills">
              <button
                v-for="(tab, index) in tabs"
                :key="index"
                class="nav-link text-start"
                :class="{ active: activeTab === index }"
                @click="activeTab = index"
              >
                {{ tab.title }}
              </button>
            </div>
          </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="col-md-10">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <router-link to="/homePage">首页</router-link>
              </li>
              <li class="breadcrumb-item">
                <router-link to="/cooperationAndExchange">合作交流</router-link>
              </li>
              <li class="breadcrumb-item active">
                {{ tabs[activeTab].title }}
              </li>
            </ol>
          </nav>

          <div class="content-box border p-4">
            <!-- 动态内容区域 -->
            <template v-if="activeTab === 0">
              <h3 class="mb-4">开放基金</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
            </template>
            <template v-if="activeTab === 1">
              <h3 class="mb-4">学术会议</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
              <div class="mt-5">
                <div class="table-responsive">
                  <table class="table table-hover align-middle">
                    <thead class="table-light">
                      <tr>
                        <th
                          v-for="(header, index) in confHeaders"
                          :key="index"
                          class="text-nowrap"
                          :class="{ 'd-none d-lg-table-cell': index === 3 }"
                        >
                          {{ header }}
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item, index) in confData" :key="index">
                        <td class="fw-semibold">{{ item.id }}</td>
                        <td class="text-primary">{{ item.teacher }}</td>
                        <td class="conference-title">
                          <div class="fw-bold">{{ item.conference }}</div>
                          <div v-if="item.subtitle" class="text-muted">
                            {{ item.subtitle }}
                          </div>
                        </td>
                        <td class="d-none d-lg-table-cell report-title">
                          {{ item.report }}
                        </td>
                        <td>{{ item.date }}</td>
                        <td>{{ item.location }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div></template
            ><template v-if="activeTab === 2">
              <h3 class="mb-4">各类任职</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
              <div class="container py-4">
                <h4 style="color: var(--site-color)" class="fw-bold mb-4">
                  教师担任国内外重要期刊负责人
                </h4>
                <div class="table-responsive">
                  <table class="table table-hover align-middle">
                    <thead class="table-light">
                      <tr>
                        <th
                          v-for="(header, index) in headers"
                          :key="index"
                          class="text-nowrap"
                          :class="{ 'd-none d-lg-table-cell': index > 5 }"
                        >
                          {{ header }}
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item, index) in journalData" :key="index">
                        <!-- 序号 -->
                        <td class="fw-semibold">{{ item.id }}</td>

                        <!-- 教师姓名 -->
                        <td class="text-primary">{{ item.teacher }}</td>

                        <!-- 任职期刊名称 -->
                        <td class="journal-name">
                          <div class="fw-bold">{{ item.journal }}</div>
                        </td>

                        <!-- 国际刊号 -->
                        <td class="d-none d-lg-table-cell">
                          <code>{{ item.issn }}</code>
                        </td>

                        <!-- 国内刊号 -->
                        <td class="d-none d-lg-table-cell">
                          <code>{{ item.cn || "-" }}</code>
                        </td>

                        <!-- 收录情况 -->
                        <td>
                          <span :class="`badge ${getIndexStyle(item.index)}`">
                            {{ item.index }}
                          </span>
                        </td>

                        <!-- 任职职位 -->
                        <td>{{ item.position }}</td>

                        <!-- 任职期限 -->
                        <td class="text-nowrap tenure-cell">
                          {{ formatDate(item.tenure) }}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="academic-org-table">
                <h4 style="color: var(--site-color)" class="fw-bold mb-4">
                  教师在国内外重要学术组织任职主要负责人
                </h4>
                <div class="table-responsive">
                  <table class="table table-hover align-middle">
                    <thead class="table-light">
                      <tr>
                        <th
                          v-for="(header, index) in orgHeaders"
                          :key="index"
                          class="text-nowrap"
                          :class="{ 'd-none d-md-table-cell': index === 5 }"
                        >
                          {{ header }}
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item, index) in orgData" :key="index">
                        <td class="fw-semibold">{{ item.id }}</td>
                        <td class="text-primary">{{ item.teacher }}</td>
                        <td class="org-name">
                          <div class="fw-bold">{{ item.organization }}</div>
                        </td>
                        <td>{{ item.position }}</td>
                        <td class="text-nowrap">{{ item.tenure }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div> </template
            ><template v-if="activeTab === 3">
              <h3 class="mb-4">科普活动</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
            </template>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
const activeTab = ref(0);
const tabs = ref([
  {
    title: "开放基金",
    content: "开放基金内容",
  },
  {
    title: "学术会议",
    content: "学术会议内容",
  },
  {
    title: "各类任职",
    content: "各类任职内容",
  },
  {
    title: "科普活动",
    content: "科普活动内容",
  },
]); // 表头
const headers = reactive([
  "序号",
  "教师姓名",
  "任职期刊名称",
  "国际刊号",
  "国内刊号",
  "收录情况",
  "任职职位",
  "任职期限",
]);

const journalData = reactive([
  {
    id: 1,
    teacher: "钟愉承",
    journal: "Applied Composite Materials",
    issn: "1573-4897",
    cn: null,
    index: "SCI",
    position: "客座主编",
    tenure: { start: "2022", end: "至今" },
  },
  {
    id: 2,
    teacher: "李国栋",
    journal: "Acta Mechanica Sinica",
    issn: "0567-7718",
    cn: "11-2063/O3",
    index: "SCI",
    position: "编委",
    tenure: { start: "2020.12", end: "2025.12" },
  },
  // 其他数据项...
]);

// 收录情况样式
const getIndexStyle = (index) => {
  const styleMap = {
    SCI: "bg-primary",
    中文核心: "bg-success",
    EI: "bg-warning",
  };
  return styleMap[index] || "bg-secondary";
};

// 日期格式化
const formatDate = (tenure) => {
  return `${tenure.start} - ${tenure.end}`;
};
// 教师在国内外重要学术组织任职主要负责人
const orgHeaders = reactive([
  "序号",
  "教师姓名",
  "学术组织名称",
  "担任职务",
  "任职期限",
]);

const orgData = reactive([
  {
    id: 1,
    teacher: "刘立胜",
    organization: "湖北省复合材料学会",
    subOrg: null,
    position: "理事长",
    tenure: "2019.1-至今",
  },
  {
    id: 2,
    teacher: "翟鹏程",
    organization: "湖北省力学学会",
    subOrg: null,
    position: "副理事长",
    tenure: "2021.1-2025.12",
  },
  // 其他数据...
]);

// 学术会议
const confHeaders = reactive([
  "序号",
  "教师姓名",
  "会议名称",
  "报告题目",
  "报告年月",
  "报告地点",
]);

const confData = reactive([
  {
    id: 1,
    teacher: "周锡龙",
    conference: "庆祝武汉理工大学合并组建二十周年系列学术活动",
    report: "基于原子力显微镜的纳米力学测试方法开发及应用",
    date: "2020.6",
    location: "在线",
  },
  {
    id: 2,
    teacher: "赖欣",
    conference: "庆祝武汉理工大学合并组建二十周年系列学术活动",
    report: "陶瓷/金属材料冲击破坏的近场动力学理论研究",
    date: "2020.6",
    location: "在线",
  },
  // 其他数据...
]);
</script>

<style scoped>
.custom-divider {
  height: 2px;
  background-color: var(--site-color);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}
.nav-link,
.nav-link:hover {
  color: var(--site-color);
}
li > a {
  color: var(--site-color);
}
.nav-pills .nav-link {
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.nav-pills .nav-link.active {
  background-color: var(--site-color);
  color: white !important;
}

.content-box {
  min-height: 600px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 基础表格样式 */
.table {
  font-size: 0.95rem;
  min-width: 992px;
}

.journal-name {
  min-width: 200px;
  max-width: 300px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .table {
    font-size: 0.85rem;
  }

  .badge {
    font-size: 0.75em;
    padding: 0.4em 0.6em;
  }

  .tenure-cell {
    min-width: 120px;
  }

  .journal-name {
    min-width: 150px;
    max-width: 200px;
  }
}

/* 平板适配 */
@media (min-width: 769px) and (max-width: 992px) {
  .table {
    font-size: 0.9rem;
  }

  .journal-name {
    min-width: 180px;
    max-width: 250px;
  }
}

/* 桌面端优化 */
@media (min-width: 993px) {
  .table {
    font-size: 1rem;
  }

  .journal-name {
    min-width: 220px;
    max-width: 350px;
  }
}

code {
  font-size: 0.9em;
  color: #dc3545;
  background-color: #f8f9fa;
  padding: 2px 4px;
  border-radius: 3px;
}
.academic-org-table {
  margin-top: 2rem;
}

.org-name {
  min-width: 220px;
  max-width: 300px;
}

@media (max-width: 768px) {
  .org-name {
    min-width: 180px;
    max-width: 250px;
    font-size: 0.9rem;
  }

  td {
    padding: 0.75rem;
  }
}

@media (min-width: 1200px) {
  .org-name {
    min-width: 280px;
  }
}

.conference-title {
  min-width: 240px;
  max-width: 320px;
}

.report-title {
  max-width: 300px;
  word-break: break-word;
}

@media (max-width: 768px) {
  .conference-title {
    min-width: 180px;
    max-width: 220px;
    font-size: 0.9rem;
  }

  td {
    padding: 0.75rem 0.5rem;
  }

  .report-title {
    font-size: 0.85rem;
  }
}

@media (min-width: 1200px) {
  .conference-title {
    min-width: 280px;
    max-width: 360px;
  }

  .report-title {
    max-width: 400px;
  }
}
</style>